{% load static %}
<!DOCTYPE html>
<html class=" flexbox flexboxlegacy no-flexboxtweener flexwrap">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

    <title>博物馆指南</title>
    <meta name="viewport"
          content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,initial-scale=1.0,user-scalable=no">
    <meta name="format-detection" content="telephone=no,email=no">
    <meta name="referrer" content="always">
    <link rel="shortcut icon" href="{% static '/images/logo.svg' %}" type="image/x-icon">
    <link rel="stylesheet" type="text/css" href={% static '博物馆_files/lemma-common_2e2e18b.css' %}>
    <link rel="stylesheet" type="text/css" href={% static '博物馆_files/inlinkPlayer_4cc55e0.css' %}>
    <link rel="stylesheet" type="text/css" href={% static '博物馆_files/topbar_8c99314.css' %}>
    <link rel="stylesheet" type="text/css" href={% static '博物馆_files/swiper_08211f8.css' %}>
    <link rel="stylesheet" type="text/css" href={% static '博物馆_files/recommend_95e8c25.css' %}>
    <link rel="stylesheet" type="text/css" href={% static '博物馆_files/summary_621e077.css' %}>
    <link rel="stylesheet" type="text/css" href={% static '博物馆_files/museumList_4fee2f0.css' %}>
    <link rel="stylesheet" type="text/css" href={% static '博物馆_files/guide_dd12d44.css' %}>
    <link rel="stylesheet" type="text/css" href={% static '博物馆_files/footer_fe5bfd0.css' %}>
    <link rel="stylesheet" type="text/css" href={% static '博物馆_files/layout_2e4ab47.css' %}>
    <script>
        function clickSaveFav() {
            // 发送异步ajax请求，发送get
            $.ajax({
                type: "get",
                url: "{% url 'collect_museum' %}",
                data: "id={{ id }}",
                success: function (response) {
                    let bt = document.getElementById("collect_museum")
                    bt.innerHTML = response
                }
            })
        }
    </script>
    <script src="{% static 'js/jquery-3.6.0.min.js' %}"></script>
</head>

<body>

<div class="topbar" id="topbar">
    <div class="title">
        博物馆指南
    </div>
    <div class="logo-icon top-icon" id="J-logo-icon">
        <a href="#">
            <img class="museum-logo-img" src={% static 'images/logo.svg' %}>
        </a>
    </div>
    <div class="more-icon top-icon" id="J-more-icon">
        <em class="layout-icons layout-icons_catalog"></em>
    </div>
    {#        <div class="search-icon top-icon" id="J-search-icon">#}
    {#            <em class="layout-icons layout-icons_new-search"></em>#}
    {#        </div>#}
    <div class="more hide">
        <ul>
            <li>
                <a href="{% url 'user_page' %}" class="active" id="J-share-icon">
                    <em class="layout-icons layout-icons_duration"></em><label>个人主页</label>
                </a>
            </li>
            <li class="more-logout" id="J-more-logout">
                <a href="{% url 'index' %}" class="active">
                    <em class="layout-icons layout-icons_logout"></em><label>返回首页</label>
                </a>
            </li>
        </ul>
    </div>
    <div class="layer hide" id="J-layer"></div>
</div>
{% if id == -1 %}
    <div style="margin-left: 35%;margin-top:10%">
        <img src='{% static 'images/no-result_771c86f.png' %} ' class="no-result-img">
        <h1 class="no-result-desc" style="margin-left: 10%">
            <span class="no-result-val"></span>暂时没有收录，换一个试试吧</h1>
    </div>
{% else %}
    {% for museum in museums_obj %}
        <div id="J-museum">
        <div class="recommend">
        <div class="swiper-container swiper-container-horizontal">
            <div class="swiper-wrapper">
                <div class="swiper-slide swiper-slide-active" data-swiper-slide-index="1" style="margin:0 80px;"><a
                        data-href="/museum/collection/1327#collectionId=21121" class="pic"
                        style="height: 700px; line-height: 590px;">
                    <img style="width: 100%;height: 100%"
                         src={{ museum.imag }} onerror="this.src='{% static 'images/故宫.jpeg' %}'">
                </a>
                </div>
            </div>
        </div>
        <div class="summary">
            <p class="name">{{ museum.name }}
                <button id="collect_museum" onclick="clickSaveFav()">
                    {% if fav_status %}
                        ♥
                    {% else %}
                        ♡
                    {% endif %}
                </button>
            </p>
            <p class="position">{{ museum.address }}</p>
            <p class="abstract">{{ museum.info }}</p>
        </div>

        <div class="guide">
            <ul class="info">
                <li>
                    <em class="layout-icons layout-icons_location"></em>
                    {{ museum.address }}
                </li>
                <li>
                    <em class="layout-icons layout-icons_price"></em>
                    <span class="name">预约信息</span>
                    {{ museum.appointment }}
                </li>
                <li>
                    <em class="layout-icons layout-icons_clock"></em>
                    <span class="name">开放时间</span>
                    {{ museum.open_time }}
                </li>
                <li>
                    <em class="layout-icons layout-icons_duration"></em>
                    <span class="name">性质</span>
                    {{ museum.character }}
                </li>
                <li style="color: #3a7fde;">
                    <em class="layout-icons layout-icons_website"></em>
                    <span class="name">官方网站</span>
                    <a data-href="{{ museum.web_address }}" class="outsite">{{ museum.web_address }}</a>
                </li>
                <li>
                    <em class="layout-icons layout-icons_sound"></em>
                    <span class="name">联系电话</span>
                    {{ museum.phone }}
                </li>
            </ul>
        </div>
    {% endfor %}
{% endif %}

</div>
</div>
</body>
<script type="text/javascript">
    document.getElementById("J-more-icon").addEventListener("click", function () {
        var moreElement = document.querySelector(".more");
        moreElement.classList.toggle("hide");
    });
    console.log({{ id }});
</script>

</html>